<template>
  <div class="home-container">
    <header-box :name="'首页'"></header-box>
    <search-box></search-box>
    <!-- banenr -->
    <div class="swiper-banner banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../assets/images/wap01.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../assets/images/wap02.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../assets/images/wap03.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../assets/images/wap04.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="../assets/images/wap05.jpg" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 首页inco -->
    <ul class="index-icon-container">
      <li>
        <img src="../assets/images/index-icon1.jpg" alt="">
        <p>早餐</p>
      </li>
      <li>
        <img src="../assets/images/index-icon2.jpg" alt="">
        <p>午餐</p>
      </li>
      <li>
        <img src="../assets/images/index-icon3.jpg" alt="">
        <p>晚餐</p>
      </li>
      <li>
        <img src="../assets/images/index-icon4.jpg" alt="">
        <p>夜宵</p>
      </li>

    </ul>
    <!-- 食物菜单 -->

    <h1 class="index-tit wid">
      食物菜单
    </h1>
    <ul class="shiwu-container wid">
      <li>
        <h4>新手菜单</h4>
        <span>一日三餐有营养</span>
      </li>
      <li>
        <h4>素食天下</h4>
        <span>清清淡淡才是真</span>
      </li>
      <li>
        <h4>营养汤汁</h4>
        <span>真材实料高营养</span>
      </li>
      <li>
        <h4>热爱生活</h4>
        <span>你知道你有多棒吗?</span>
      </li>
    </ul>
    <!-- 今日餐桌 -->
    <h1 class="index-tit wid">
      菜谱精选
    </h1>
    <ul class="hot-container wid">

      <li v-for="item in  cartlist" :key="item.id" @click="goArticle(item.id)">
        <div class="img-box">
          <img :src="item.albums[0]" alt="">
        </div>
        <h4>{{item.title}}</h4>
        <p>
          <span>
            <i class="iconfont icondengji"></i>
            {{item.tags}}
          </span>
          <span>
            点击<b>{{item.id}}</b>次
          </span>
        </p>
      </li>

    </ul>

  </div>
</template>

<script>
  import Swiper from 'swiper';
  import Header from "../components/tabbar/Header.vue"
  import Search from "../components/subcomponent/search.vue"
  export default ({
    data() {
      return {
        cartlist: [],
      }
    },
    created() {
      this.Getcartlist();
    },
    mounted() {
      new Swiper('.swiper-banner', {
        slidesPerView: 1.1,
        centeredSlides: true,
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      })
    },
    methods: {
      Getcartlist() {
        this.$http.get("json/cart/cart-list.json").then(result => {
          if (result.body.resultcode == 200) {
            this.cartlist = result.body.result.data;
          } else {
            Toast("数据加载失败");
          }
        });
        this.$http.get("json/cart/cart-list2.json").then(result => {
          if (result.body.resultcode == 200) {
            this.cartlist = this.cartlist.concat(result.body.result.data)
          } else {
            Toast("数据加载失败");
          }
        });
        this.$http.get("json/cart/cart-list3.json").then(result => {
          if (result.body.resultcode == 200) {
            this.cartlist = this.cartlist.concat(result.body.result.data)
            for (var i = 0; i < this.cartlist.length; i++) {
              this.cartlist[i].tags = this.cartlist[i].tags.slice(0,5)+'...'
            }
          } else {
            Toast("数据加载失败");
          }
        });
      },
        goArticle(id){
        this.$router.push('/cart/article/'+id)
      }
    },
    components: {
      "header-box": Header,
      "search-box": Search
    },
    props:['name']
  })

</script>
<style lang="scss">
  .home-container {
    overflow-x: hidden
  }

</style>
